<template>
	<div class="cljk-table">
		<div id="gjqx" ref="gjqx" :style="{width: '100%',height:tableH+'vh'}"></div>
	</div>
</template>

<script>
	export default {

		name: 'gjqx',
		props: {
			bottomHeight: {
				type: String,
				default: function() {
					return 37 + 'vh';
				},
				required: true
			},
			nodes: {
				type: Object,
				default: function() {
					return {};
				},
				required: true
			},
			sourceTableData: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			},
		},
		watch: {
			bottomHeight: function(val) {
				if (val === '37vh') {
					this.tableH = 30
				} else {
					this.tableH = 74
				}
			},
			nodes: function(val) {
				console.log(val)
			},

			sourceTableData: function(val) {
				if (val && val.length > 0) {
					this.speedS = []
					this.lcS = []
					this.timeS = []
					for (var i = 0; i < val.length; i++) {
						this.timeS.push(val[i].gpstime)
						this.speedS.push([
							val[i].gpstime,
							val[i].velocity
						])

						this.lcS.push(
							[val[i].gpstime, Math.floor((val[i].distTotal - val[0].distTotal) * 1000) / 1000 ]
						)

					}
					if (this.lcS.length > 0) {
						this.lcmin = this.lcS[0][1]
						this.lcmax = this.lcS[this.lcS.length - 1][1]
					}
					if(this.timeS.length>0){
						this.zoomStartValue=this.timeS[0]
						this.zoomEndValue=this.timeS[this.timeS.length-1]
					}


					this.initChart()
				}
			}
		},

		data() {
			return {
				tableH: 30,
				speedS: [],
				timeS: [],
				lcS: [],
				lcmin: 0,
				lcmax: 0,
				speedmin: 0,
				speedmax: 200,
				zoomStartValue:'',
				zoomEndValue:''
			}
		},
		methods: {

			initChart() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = this.$echarts.init(this.$refs.gjqx);

				// 指定图表的配置项和数据
				var option = {

					tooltip: {
						trigger: 'axis'
					},
					legend: [{
							top: "30%",
							right: "0%",
							textStyle: {
								fontSize: 12, //字体大小
								color: "red" //字体颜色（图例与图例文字配色保持一致）
							},
							data: [{
								name: "里程"
							}]
						},
						{
							bottom: "20%",
							left: "0%",
							textStyle: {
								fontSize: 12, //字体大小
								color: "green" //字体颜色
							},
							data: [{
								name: "速度"
							}]
						}

					],
					dataZoom: [{
						type: "inside",
						// start: 50, // 不能使用百分比，因为搜索的时间和数据的时间不一定能对应上
						// end: 100,
						startValue: this.zoomStartValue,
						endValue: this.zoomEndValue,
						filterMode: "filter",
					}, ],

					xAxis: {

						type: "time",
						data: this.timeS,
						splitLine: {
							show: false
						}
					},
					yAxis: [{
						type: "value",
						name: "速度(km/h)",
						min: this.speedmin,
						max: this.speedmax,
					}, {
						type: "value",
						name: "里程(km)",
						min: this.lcmin,
						max: this.lcmax,
						axisLabel: {
							formatter: function(v) {
								return v.toFixed(1); //0表示小数为0位，1表示1位小数，2表示2位小数
							},
							color: function(value, index) {
								return value >= 1000 ? "red" : "green";
							}
						}
					}, ],
					series: [{
							name: '速度',
							type: 'line',
							color: ["#eb9f0d"],
							symbol: "none",
							smooth: true,
							data: this.speedS
						},
						{
							name: '里程',
							type: 'line',
							color: ["#969ac7"],
							symbol: "none",
							smooth: true,
							yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
							data: this.lcS
						}
					]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}


		},
		mounted() {
			// this.initChart()
		}


	}
</script>

<style>
</style>